<!DOCTYPE html>
<html>
    <head>
	    <title>CCC Samples - Measure Discriminator Dimensions</title>

	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/jquery.js"></script>

	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/jquery.tipsy.js"></script>
	    <link type="text/css" href="../ccc-js/src/main/javascript/package-res/lib/tipsy.css" rel="stylesheet"/>

	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/protovis.js"></script>
	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/protovis-msie.js"></script>
	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/tipsy.js"></script>

	    <script type="text/javascript" src="data/q01-01.js"></script>

        <!-- @SCRIPTSBEG@ -->
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/shim.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/prologue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/object.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/info.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/bit.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/fun.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/number.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/array.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/string.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/conversion.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/predicate.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/error.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/log.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/private.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/varia.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/qualifiedName.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/namespace.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/describe.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/mixin.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/create.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/attached.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/configure.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/inherit.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/overrides.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/methods.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/MetaType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/Object.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/type.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/enum.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/classify.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/fields.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/id.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/Set.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/Map.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/OrderedMap.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/EventSource.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/html.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/css.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/query.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/textTable.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/math.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/epilogue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/_data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/dimensionType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/complexType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/complexTypeProject.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/atom.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/complex.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/complexView.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/datum.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/dimension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.selected.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.operations.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data-filtered.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data-grouped.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.compat.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/abstract-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/grouping-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/groupingSpec.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/linear-interp-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/linear-interp-seriesState.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/zero-interp-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/zero-interp-seriesState.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/abstract-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/abstract-matrix-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/crosstab-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/relational-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/number-formatStyle.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/number-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/date-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/custom-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/formatProvider.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/format-language.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/shims.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/prologue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/extension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/colorScheme.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/time.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/mark.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/enums.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/offset.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/percentValue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/sides.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/size.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/optionsMgr.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract-interactive.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/color.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/context.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/text.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/trends.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/spec.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/slidingWindow.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/scene/scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/scene/var.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRole.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRolesBinder.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRoleVarHelper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/dataCell/dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/dataCell/color-dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/size-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/normalized-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/panel/panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/content-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plotBg-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legend-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legend-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-root-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-group-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-sceneSection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.selection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.visibility.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legendSymbolRenderer.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/title/abstract-title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/title/title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/dockingGrid-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.visualRoles.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.plots.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.axes.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.panels.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.selection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.extension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.activeScene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/multiChart-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/multiChart-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/smallChart-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/base-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/panel-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/label-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/value-label-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/dot-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/dotSizeColor-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/line-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/area-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/bar-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/rule-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/discrete-bands-layout.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/cart-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/root-cart-axis-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/tick-cart-axis-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/abstract-cart-axis-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/cart-axis-title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-focusWindow.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/ortho-cart-dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-dockingGrid-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-metricxy/abstract-metricxy-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-metricxy/abstract-metricxy-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-slice-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/nbar/nbar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-legend-group-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-legend-item-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-size-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-slice-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bullet/bullet-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bullet/bullet-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/parallel/par-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/dataTree/dt-chart.js"></script>
        <!-- @SCRIPTSEND@ -->
        <link type="text/css" href="lib/codemirror/codemirror.css" rel="stylesheet"/>
        <script src="lib/codemirror/codemirror.js" type="text/javascript"></script>
        <script src="lib/codemirror/javascript.js" type="text/javascript"></script>

        <script type="text/javascript" src="pvcDocUtils.js"></script>
        <link type="text/css" href="pvcDocUtils.css" rel="stylesheet"/>
    </head>
    <body>

<h2>Examples</h2>
<h3>Series label containing the name of the single measure</h3>

<div class="tryItTable">
<div>
<div>
<textarea cols="90" rows="21" id="pvcExample1Code">
new pvc.BarChart({
    canvas: "pvcExample1",
    width:  500,
    height: 350,
    title: "Profit By select Dates split per City",
    animate: false,
    selectable: true,
    hoverable:  true,
    legend: true,
    legendPosition: "right",
    readers: ["city", "date", "profit"],
    plots: [
        {
            name: "main",
            stacked: true,
            visualRoles: {
                category: "date",
                series: "city, valueRole.dim",
                value: "profit"
            }
        }
    ]
})
.setData(relational_01_neg, {crosstabMode: false})
.render();</textarea>
<button id="pvcExample1TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div><div id="pvcExample1"></div></div>
</div>
</div>


<h3>Measures as series</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample2Code">
new pvc.BarChart({
    canvas: "pvcExample2",
    width:  500,
    height: 350,
    title: "Costs and Sales By select Dates",
    animate: false,
    selectable: true,
    hoverable:  true,
    legend: true,
    legendPosition: "right",
    readers: ["city", "date", "costs", "sales"],
    plots: [
        {
            name: "main",
            stacked: true,
            visualRoles: {
                category: "date",
                series: "valueRole.dim",
                value: "sales, costs"
            }
        }
    ]
})
.setData(relational_01_2measures_costs_sales, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample2TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample2"></div></div>
    </div>
</div>

<h3>Measures as categories + Different formatting per measure (tooltip)</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample3Code">
new pvc.BarChart({
    canvas: "pvcExample3",
    width:  500,
    height: 350,
    title: "Sales By select Dates and Currency " +
      "split per City",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    baseAxisComposite: true,
    baseAxisSize: 100,
    readers: ["city", "date", "salesEUR", "salesUSD"],
    plots: [
        {
            name: "main",
            stacked: true,
            visualRoles: {
                category: "date, valueRole.dim",
                series: "city",
                value: "salesEUR, salesUSD"
            }
        }
    ],
    dimensions: {
      salesEUR: {
        format: {
            number: {
                mask: '0,0 Currency',
                style: {
                    currency: "€"
                }
            }
        }
      },
      salesUSD: {
        format: {
            number: {
                mask: '0,0 Currency',
                style: {
                    currency: "$"
                }
            }
        }
      }
    }
})
.setData(relational_01_2measures_currency, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample3TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample3"></div></div>
    </div>
</div>

<h3>Measures as series and as categories</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample4Code">
new pvc.BarChart({
    canvas: "pvcExample4",
    width:  500,
    height: 350,
    title: "Sales By select Dates and " +
      "Currency split and colored by City and Currency",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    baseAxisComposite: true,
    baseAxisSize: 100,
    readers: ["city", "date", "salesEUR", "salesUSD"],
    plots: [
        {
            name: "main",
            stacked: true,
            visualRoles: {
                category: "date, valueRole.dim",
                series: "city, valueRole.dim",
                value: "salesEUR, salesUSD"
            }
        }
    ],
    dimensions: {
      salesEUR: {
        format: {
            number: {
                mask: '0,0 Currency',
                style: {
                    currency: "€"
                }
            }
        }
      },
      salesUSD: {
        format: {
            number: {
                mask: '0,0 Currency',
                style: {
                    currency: "$"
                }
            }
        }
      }
    }
})
.setData(relational_01_2measures_currency, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample4TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample4"></div></div>
    </div>
</div>

<h3>Two Plots, One Measure per plot, Series label containing measure name</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample5Code">
new pvc.LineChart({
    canvas: "pvcExample5",
    width:  500,
    height: 350,
    title: "Sales And Profit By Date and City",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    dimensions: {date: {valueType: Date}}, // timeSeries
    readers: ["city", "date", "profit", "sales"],
    color2AxisColors: ["red", "green", "blue"],
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "date",
                series: "city, valueRole.dim",
                value: "sales"
            }
        },
        {
            type: "point",
            colorAxis: 2,
            visualRoles: {
                value: "profit"
            },
            line_lineWidth: 2
        }
    ]
})
.setData(relational_01_2measures_neg, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample5TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample5"></div></div>
    </div>
</div>

<h3>Bar plot of two measures with linear trend lines in separate plot</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample14Code">
new pvc.BarChart({
    canvas: "pvcExample14",
    width:  600,
    height: 350,
    title: "Sales Expected And Actual By Date and City",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    readers: ["date", "salesExpected", "salesActual"],
    trendType: 'linear',
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "date",
                series: "valueRole.dim",
                value: "salesExpected, salesActual"
            }
        }
    ]
})
.setData(relational_06, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample14TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample14"></div></div>
    </div>
</div>

<h3>Bar plot of two measures in series and with null interpolation</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample15Code">
new pvc.LineChart({
    canvas: "pvcExample15",
    width:  600,
    height: 350,
    title: "Sales And Profit By Date and City",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    readers: ["type", "territory", "salesExpected", "salesActual"],
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "type",
                series: "territory, valueRole.dim",
                value: "salesExpected, salesActual"
            },
            dotsVisible: true,
            nullInterpolationMode: "linear"
        }
    ]
})
.setData(relational_07_cross_nulls, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample15TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample15"></div></div>
    </div>
</div>

<h3>Multiple measures, spread across three plots, each with a different line style, Series is measure name</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample6Code">
new pvc.LineChart({
    canvas: "pvcExample6",
    width:  500,
    height: 350,
    title: "Sales And Statistics By Date",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    dimensions: {
        // timeSeries
        date: {valueType: Date}
    },
    readers: ["date", "sales", "p25s", "p75s", "p5s", "p95s"],
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "date",
                series: "valueRole.dim",
                value: "sales"
            },
            line_lineWidth: 3
        },
        {
            type: "point",
            visualRoles: {
                value: "p25s, p75s"
            }
        },
        {
            type: "point",
            visualRoles: {
                value: "p5s, p95s"
            },
            line_strokeDasharray: "dash"
        }
    ]
})
.setData(relational_01d, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample6TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample6"></div></div>
    </div>
</div>

<h3>Multichart of a single plot; small charts split by measure</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample7Code">
new pvc.BarChart({
    canvas: "pvcExample7",
    width:  500,
    height: 350,
    title: "Sales By Region and Split By Brand vs " +
      "Quantity By Region and Split By Brand",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    orthoAxisDomainScope: "cell",
    legendPosition: "right",
    readers: ["region", "brand", "quantity", "sales"],
    visualRoles: {
        multiChart: "valueRole.dim",
    },
    plots: [
        {
            name: "main",
            stacked: true,
            visualRoles: {
                series: "brand",
                category: "region",
                value: "sales, quantity"
            }
        }
    ]
})
.setData(relational_04b, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample7TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample7"></div></div>
    </div>
</div>

<h3>Multichart of two alternating plots</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample8Code">
new pvc.BarChart({
    canvas: "pvcExample8",
    width:  600,
    height: 350,
    title: "Sales and Profit By Date and Split By City",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    orthoAxisDomainScope: "cell",
    multiChartColumnsMax: 1,
    legendPosition: "right",
    readers: ["city", "date", "costs", "sales"],
    visualRoles: {
        multiChart: "valueRole.dim",
    },
    plots: [
        {
            name: "main",
            stacked: true,
            visualRoles: {
                series: "city",
                category: "date",
                value: "sales"
            }
        },
        {
            type: "point",
            stacked: true,
            visualRoles: {
                value: "costs"
            }
        }
    ]
})
.setData(relational_01_2measures_costs_sales_pos, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample8TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample8"></div></div>
    </div>
</div>

<h3>Multichart of alternating plots with linear trend lines</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample9Code">
new pvc.LineChart({
    canvas: "pvcExample9",
    width:  500,
    height: 350,
    title: "Sales and associated Statistics By Date and Split By City",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    multiChartColumnsMax: 2,
    legendPosition: "right",
    dimensions: {date: {valueType: Date}},
    readers: ["city", "date", "sales", "p25s", "p75s", "p5s", "p95s"],
    visualRoles: {
        multiChart: "valueRole.dim",
    },
    plots: [
        {
            name: "main",
            nullInterpolationMode: 'linear',
            trendType: 'linear',
            visualRoles: {
                series: "city",
                category: "date",
                value: "sales"
            }
        },
        {
            type: "point",
            nullInterpolationMode: 'linear',
            trendType: 'linear',
            areasVisible: true,
            visualRoles: {
                value: "p25s, p75s, p5s, p95s"
            }
        }
    ]
})
.setData(relational_01c, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample9TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample9"></div></div>
    </div>
</div>

<h3>Multichart of a single PIE plot; small charts split by measure</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample10Code">
new pvc.PieChart({
    canvas: "pvcExample10",
    width:  500,
    height: 350,
    title: "Sales or Quantity By Brand, By Region",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    multiChartColumnsMax: 2,
    readers: ["region", "brand", "quantity", "sales"],
    visualRoles: {
        multiChart: "region, valueRole.dim",
    },
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "brand",
                value: "sales, quantity"
            }
        }
    ]
})
.setData(relational_04b, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample10TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample10"></div></div>
    </div>
</div>

<h3>Multichart of a single PIE plot; measures as categories</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample11Code">
new pvc.PieChart({
    canvas: "pvcExample11",
    width:  500,
    height: 400,
    title: "Sales and Other Gains By Brand, By Region",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    multiChartColumnsMax: 1,
    readers: ["region", "brand", "otherGains", "sales"],
    visualRoles: {
        multiChart: "region"
    },
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "brand, valueRole.dim",
                value: "otherGains, sales"
            }
        }
    ]
})
.setData(relational_04d, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample11TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample11"></div></div>
    </div>
</div>

<h3>Hierarchical chart with the discriminator amid the main category role</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample12Code">
new pvc.SunburstChart({
    canvas: "pvcExample12",
    width:  500,
    height: 400,
    title: "Sales and Other Gains By Brand, By Region",
    animate: false,
    selectable: true,
    hoverable: true,
    readers: ["region", "brand", "otherGains", "sales"],
    plots: [
        {
            name: "main",
            visualRoles: {
                category: "region, sizeRole.dim, brand",
                size: "otherGains, sales"
            }
        }
    ]
})
.setData(relational_04d, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample12TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample12"></div></div>
    </div>
</div>

<h3>Chart with two measures but no discriminator</h3>

<div class="tryItTable">
    <div>
        <div>
<textarea cols="90" rows="21" id="pvcExample13Code">
new pvc.BarChart({
    canvas: "pvcExample13",
    width:  500,
    height: 400,
    title: "Sales and Other Gains By Brand, split by Region",
    animate: false,
    selectable: true,
    hoverable: true,
    legend: true,
    legendPosition: "right",
    readers: ["region", "brand", "otherGains", "sales"],
    plots: [
        {
            name: "main",
            visualRoles: {
                series: "region",
                category: "brand",
                value: "otherGains, sales"
            }
        }
    ]
})
.setData(relational_04d, {
    crosstabMode: false
})
.render();</textarea>
            <button id="pvcExample13TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
        </div>
        <div><div id="pvcExample13"></div></div>
    </div>
</div>
  </body>
</html>
